<template>
  <div class="footer">
    <div class="foot-content">
      <el-row :gutter="24">
        <el-col :span="8">
          <div class="grid-content">
            <h1 class="title">服务</h1>
            <p><a href="#">评测队伍</a></p>
            <p><a href="#">系统信息</a></p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <h1 class="title">开发</h1>
            <p><a href="https://www.ptu.edu.cn/xgk/">归属</a></p>
            <p><a href="#">API</a></p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <h1 class="title">支持</h1>
            <p>
              <a @click="hanlderToAboutUs()">关于我们</a>
            </p>
            <p>
              <a href="#">帮助文档</a>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="foot-content">
      GRAPE CODE Online Judge Powered by
      <a href="https://www.ptu.edu.cn/xgk/">GCOJ</a>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const hanlderToAboutUs = ()=>{
  router.push('/home/us')
}
</script>

<style lang="less" scoped>
.footer {
  width: 90%;
  color: #555 !important;
  text-align: center;
  margin: 0 auto;
  .foot-content {
    width: 100%;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;

    a {
      text-decoration: none;
      background-color: transparent;
      color: #18a058;
      text-decoration: underline;
      outline: 0;
      cursor: pointer;
      transition: color 0.2s ease;
    }
  }

  .el-row {
    margin-bottom: 20px;

    .el-col {
      border-radius: 4px;

      .grid-content {
        border-radius: 4px;
        min-height: 36px;
        align-items: center;
        padding: 20px;

        .title {
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
            Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
            sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
          font-weight: 300;
          color: #3d3d3d;
          line-height: 1.1;
          font-size: 1.5rem;
        }

        p {
          margin-top: 16px;

          a {
            text-decoration: none;
            background-color: transparent;
            color: #495060;
            outline: 0;
            cursor: pointer;
            transition: color 0.2s ease;
          }

          a:hover {
            color: #18a058;
          }

          i {
            font-size: 1.1em;
          }
        }
      }
    }
  }

  .el-row:last-child {
    margin-bottom: 0;
  }
}
</style>
